Rjiazhen的博客

Appearance

Learning Weekly-2025-01-26 ​

The problem of missing attributes of the vue method ​

vue方法中属性丢失的问题【渡一教育】_哔哩哔哩_bilibili

The method defined in the vue file will be bind to the instance through the .bind() method when instantiated, and this process will cause the attributes of the method to be lost.

To resolve this problem, you need to defined method in the data.

Git dose not track file name case change ​

git大小写规则造成的问题【渡一教育】_哔哩哔哩_bilibili

Use the command below to turn off git's case-ignoring:

bash
git config core.ignorecase false

How to encapsulate components ​

如何封装组件【渡一教育】_哔哩哔哩_bilibili Follows these steps for component design and implementation:

  1. Confirm motivation. That is, determine the problem to be solve by the component, and its scope of application.
  2. Analysis boundary. The more versatile it is, the narrower the boundary, the more flexible it is, and the less convenient it is.
  3. Design interface. Includes properties, slot and event. And output the document.
  4. Code implementation.
  5. Test. Includes unit testing, integration testing.
  6. Maintenance.

The border highlighting effect follow mouse ​

鼠标移动的高亮边框效果【渡一教育】_哔哩哔哩_bilibiliThe highlight effect of the border follow mouse

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
      <div class="card">
        <div class="inner">inner-content</div>
      </div>
    </div>
  </body>
  <script>
    const gridContainer = document.querySelector('.grid');
    const cards = document.querySelectorAll('.card');

    window.addEventListener('mousemove', (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      cards.forEach((card) => {
        const rect = card.getBoundingClientRect();
        const x = mouseX - rect.left - rect.width / 2;
        const y = mouseY - rect.top - rect.height / 2;

        card.style.setProperty('--x', `${x}px`);
        card.style.setProperty('--y', `${y}px`);
      });
    });
  </script>
  <style>
    body {
      background-color: #000;
    }

    .grid {
      margin: 0 auto;
      width: 1000px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .card {
      width: 300px;
      height: 300px;
      background-color: rgba(255, 255, 255, 0.2);
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(closest-side circle, #fff 0%, #0000 100%);
      transform: translate(var(--x, -10000px), var(--y, -10000px));
    }

    .inner {
      position: absolute;
      inset: 3px;
      border-radius: inherit;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
    }
  </style>
</html>

Concurrent task runner ​

并发任务控制【渡一教育】_哔哩哔哩_bilibili

A task runner class that can control the number of simultaneous task:

ts
class ConcurrentTaskRunner {
  private tasks: {
    task: () => any;
    resolve: (value?: any) => void;
    reject: (reason?: any) => void;
  }[] = [];
  private runningTasks = 0;

  constructor(private maxConcurrentTasks: number) {
    this.maxConcurrentTasks = maxConcurrentTasks;
  }

  add(task: () => any) {
    return new Promise((resolve, reject) => {
      this.tasks.push({
        task,
        resolve,
        reject,
      });
      this.#run();
    });
  }

  #run() {
    while (
      this.runningTasks < this.maxConcurrentTasks &&
      this.tasks.length > 0
    ) {
      const { task, resolve, reject } = this.tasks.shift() || {};
      if (task) {
        this.runningTasks++;
        Promise.resolve(task())
          .then(resolve, reject)
          .finally(() => {
            this.runningTasks--;
            this.#run();
          });
      }
    }
  }
}

const taskRunner = new ConcurrentTaskRunner(2);

const addTask = (time: number, name: string) => {
  return taskRunner.add(() => {
    taskRunner.add(() => {
      return new Promise<void>((resolve) => {
        setTimeout(() => {
          console.log(
            `Task ${name} finished`,
            'time :',
            time,
            new Date().toLocaleString(),
          );
          resolve();
        }, time);
      });
    });
  });
};

addTask(1000, 'A'); // Task A finished time : 1000 2025/1/25 19:25:12
addTask(1000, 'B'); // Task B finished time : 1000 2025/1/25 19:25:12
addTask(1000, 'C'); // Task C finished time : 1000 2025/1/25 19:25:13
addTask(1000, 'D'); // Task D finished time : 1000 2025/1/25 19:25:13
addTask(1000, 'E'); // Task E finished time : 1000 2025/1/25 19:25:14